<template>
  <div class="reset-password">
    <Model
      v-if="modelActive"
      :modelMessage="modelMessage"
      v-on:close-model="closeModel"
    />
    <Loading v-if="loading" />
    <div class="form-wrap">
      <form class="reset">
        <p class="login-register">
          已经有账号了？
          <router-link class="router-link" :to="{ name: 'Login' }"
            >登录</router-link
          >
        </p>
        <h2>重置密码</h2>
        <p>请输入邮箱来重置密码</p>
        <div class="inputs">
          <div class="input">
            <input type="text" placeholder="email" v-model="email" />
            <Email class="icon" />
          </div>
        </div>
        <button @click.prevent="resetPassword">重置</button>
        <div class="angle"></div>
      </form>
      <div class="background"></div>
    </div>
  </div>
</template>

<script>
import Email from '../assets/Icons/envelope-regular.svg';
import Model from '../components/Model.vue';
import Loading from '../components/Loading.vue';
import firebase from 'firebase/app';
import 'firebase/auth';
export default {
  name: 'ForgotPassword',
  components: { Email, Model, Loading },
  data() {
    return {
      email: null,
      modelActive: false,
      modelMessage: '',
      loading: null,
    };
  },
  methods: {
    resetPassword() {
      this.loading = true;
      firebase
        .auth()
        .sendPasswordResetEmail(this.email)
        .then(() => {
          this.modelMessage = '如果你账号存在，你会收到一个邮件';
          this.loading = false;
          this.modelActive = true;
        })
        .catch((err) => {
          this.modelMessage = err.message;
          this.loading = false;
          this.modelActive = true;
        });
    },
    //
    closeModel() {
      this.modelActive = !this.modelActive;
      this.email = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.reset-password {
  position: relative;
  .form-wrap {
    .reset {
      h2 {
        margin-bottom: 8px;
      }
      p {
        text-align: center;
        margin-bottom: 32px;
      }
    }
  }
}
</style>
